<script setup lang="ts">
  import { Good } from '@/views/storage/allot-in/types'
  import _ from 'lodash'
  import { PropType, ref, watch } from 'vue'
  import { useAllotCheckSnCode } from '@/services/pages/storage/useWarehouse'
  import { HMessageBox } from '@/components/common/message'
  import { TableInstance } from 'element-plus'

  const { form, checkLoading, check, resetForm } = useAllotCheckSnCode()

  const props = defineProps({
    good: {
      type: Object as PropType<Good>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update', value: Good): void
  }>()

  // 抽屉显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 表格列表
  const table = ref<Array<Good>>([])

  // 表格组件实例
  const tableInstance = ref<TableInstance | null>(null)

  /**
   * 确定事件
   */
  const onConfirm = async () => {
    if (!table.value.every((item) => item.snCodes[0] && item.snCodes[0].snCode)) {
      HMessageBox.error('请填写序列号')
      return
    }
    // const snCode = table.value[0].snCodes[0].snCode
    // if (table.value.every((item) => item.snCodes[0].snCode === snCode)) {
    //   HMessageBox.error('序列号不能一致')
    //   return
    // }
    form.value = {
      storeGoodsVos: table.value.map((item) => {
        return {
          goodsCode: item.goodsCode,
          goodsId: item.goodsId,
          goodsName: item.goodsName,
          goodsSpec: item.goodsSpec,
          goodsSpecId: item.goodsSpecId,
          snCodes: item.snCodes,
          store: item.store,
          storeId: item.storeId,
        }
      }),
    }
    const res = await check()
    if (res.code === 20000) {
      const good = _.cloneDeep(props.good)
      good.snCodes = table.value.map((item) => {
        return {
          snCode: item.snCodes[0].snCode,
          snCodeId: item.snCodes[0].snCodeId,
        }
      })
      hideDrawer()
      emits('update', good)
      return
    }
    HMessageBox.error('序列号错误')
  }

  /**
   * 隐藏抽屉
   */
  const hideDrawer = () => {
    table.value.length = 0
    visible.value = false
    resetForm()
  }

  watch(
    visible,
    (value) => {
      if (value && props.good) {
        for (let i = 0; i < Number(props.good.qty); i++) {
          table.value.push(_.cloneDeep(props.good))
        }
        table.value = table.value.map((item, index) => {
          item.snCodes = [
            {
              snCode: props.good.snCodes[index] ? props.good.snCodes[index].snCode : '',
              snCodeId: '',
            },
          ]
          return item
        })
      }
    },
    { deep: true },
  )
</script>

<template>
  <h-drawer
    v-model="visible"
    title="序列号填写"
    :width="1000"
    unit="px"
    :loading="checkLoading"
    @close="hideDrawer"
  >
    <el-table ref="tableInstance" :data="table" :border="true">
      <!-- 序号 -->
      <el-table-column type="index" lable="序号" fixed="left" :align="'center'" width="50" />

      <!-- 调出仓 -->
      <el-table-column prop="store" label="调出仓" width="120" show-overflow-tooltip />

      <!-- 调入仓 -->
      <el-table-column prop="inStore" label="调入仓" width="120" show-overflow-tooltip />

      <!-- 序列号 -->
      <el-table-column label="序列号" width="160">
        <template #default="{ row }">
          <el-input v-model.trim="row.snCodes[0].snCode" clearable placeholder="请输入序列号" />
        </template>
      </el-table-column>

      <!-- 设备编号 -->
      <el-table-column prop="goodsCode" show-overflow-tooltip label="设备编号" width="120" />

      <!-- 类型 -->
      <el-table-column label="类型" width="50">
        <template #default="{ row }">
          {{ row.goodsType === 1 ? '成品' : '物料' }}
        </template>
      </el-table-column>

      <!-- 设备名称 -->
      <el-table-column prop="goodsName" show-overflow-tooltip label="设备名称" width="160" />

      <!-- 规格 -->
      <el-table-column prop="goodsSpec" show-overflow-tooltip label="规格" width="120" />

      <!-- 分类 -->
      <el-table-column prop="classify" label="分类" width="120" />

      <!-- 单位 -->
      <el-table-column prop="unit" label="单位" width="160" />

      <!-- 备注 -->
      <el-table-column label="备注" show-overflow-tooltip prop="remark" width="160" />

      <!-- 紧急程度 -->
      <el-table-column label="紧急程度">
        <template #default="{ row }">
          <template v-if="row.grade === 1">一般</template>
          <template v-if="row.grade === 2">紧急</template>
          <template v-if="row.grade === 3">特别紧急</template>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <h-button is-modal type="primary" @click="onConfirm">确定</h-button>
      <h-button is-modal @click="hideDrawer">取消</h-button>
    </template>
  </h-drawer>
</template>

<style scoped lang="scss"></style>
